<template>
  <div
    class="v-editor-sequence-select"
    style="width: 100%"
  >
    <MDropdown
      :disabled="row.readonly || isModelDisabled"
      lazy
      :loadListCallback="loadOptions"
    >
      <div class="g-jc-sb g-pd-l-8 g-pointer">
        <div class="g-flex-1">
          {{ locale.getTByKey(selectedValue, selectedValue) }}
        </div>
        <div
          v-if="selected && !row.readonly && !isModelDisabled"
          class="g-flex-0 g-pd-lr-4"
        >
          <img
            src="statics/icons/app/iconlist2.png"
            @click="handleClick"
          />
        </div>
      </div>
      <template #dropdown>
        <MDropdownMenuItem
          v-for="item in options"
          :key="item.value"
          class="g-one-line"
          @click="handleClickItem(item)"
        >
          {{ locale.getTByContent(item, item.label, { en: "enLabel", zhCn: "label" }) }}
        </MDropdownMenuItem>
      </template>
    </MDropdown>
  </div>
</template>
<script lang="ts" setup>
import { ref, computed, Ref, inject } from "vue";
import { ModelValue, PropertyDropdownOption, PropertyRow } from "../../types";
import { propertyUtil } from "../../PropertyUtil";
import { BusEvent, PropertyKey } from "@/constants/Enums";
import { GlobalNumberType } from "@/constants/StType";
import { modelService } from "@/modules/model/service";
import MDropdown from "@/common/dropdown/Dropdown.vue";
import MDropdownMenuItem from "@/common/dropdown/DropdownMenuItem.vue";
import { locale } from "@/util/locale";
import { useLoadItemsOptions } from "../common/useLoadOptions";

const isModelDisabled = inject("isModelDisabled") as Ref<boolean>;

/**
 * 普通下拉选择，只处理固定列表的拉下选择 比如visibility（完成）
 */
const props = defineProps<{
  row: PropertyRow;
  selected?: boolean;
}>();

const clientY = ref(0);

const handleClick = (target: MouseEvent) => {
  clientY.value = target.clientY;
};

const selectedValue = computed(() => {
  const id = (props.row.value as ModelValue)?.id;
  console.log("id", props.row);
  if (id) {
    const name = (props.row.value as ModelValue).name || "";
    return locale.getTByKey("modelIdToName." + id, name);
    // return (props.row.value as ModelValue).name;
  } else {
    const value = props.row.value;
    return locale.getTByKey("modelIdToName." + value, value);
  }
});

async function loadFn() {
  const projectId = app.activeProject?.id;
  const modelId = props.row.modelId;
  let list: PropertyDropdownOption[];
  if (props.row.key === PropertyKey.Customization_DiagramTypeFilter_DiagramType) {
    list = await loadCustomizationDiagramTypeFilterDiagramTypeOptions();
  } else {
    list = await modelService.getPropertyItems(projectId!, modelId, props.row.key);
  }
  console.log("list", list);
  return list;
}
const { options, loadOptions } = useLoadItemsOptions(props.row, loadFn);

async function handleClickItem(item: PropertyDropdownOption) {
  const projectId = app.activeProject!.id;
  if (item.value === GlobalNumberType["SequenceType_Expression"] || item.value === GlobalNumberType["SequenceType_OwnerNumber"]) {
    app.$notify({
      type: "warning",
      title: "编辑失败",
      message: locale.t("属性编号类型暂不支持所有者编号和表达式, 请重新选择")
    });
    return;
  }
  const dto = propertyUtil.getUpdatePropertyDtoByPropertyRow(props.row, projectId!);
  dto.value = item.value;
  await modelService.updateModelProperty(dto);
  app.$bus.emit(BusEvent.REFRESH_PROPERTY, props.row.modelId, props.row.key);
}
</script>
